<template>
  <div class="home">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="d in swiperList"
          :key="d.link"
          :style="{ 'background-image': `url(${d.image})` }"
        >
          <a :href="d.link" target="_blank"></a>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="d in swiperList" :key="d.link"><img :src="d.image" alt=""></swiper-slide>
    </swiper> -->

    <song-list></song-list>
  </div>
</template>

<script>
// @ is an alias to /src
import axios from "axios";
import SongList from '@/components/SongList.vue';

// import Vue from 'vue'
// import VueAwesomeSwiper from 'vue-awesome-swiper';
// import SwiperCore, {Pagination} from 'swiper';
// SwiperCore.use([Pagination])
// import 'swiper/swiper-bundle.css'
// Vue.use(VueAwesomeSwiper)

export default {
  name: "Home",
  components: {SongList},

  data() {
    return {
      swiperList: [],
      // swiperOption: {
      //   loop: true,
      //   autoplay: {
      //     delay: 2000
      //   }
      // }
    };
  },
  created() {
    axios.get("/api/slider-list").then(({ data }) => {
      console.log(data);
      this.swiperList = data.data;
      // this.initSwiper()
      // 当swiperList赋值后，视图更新（DOM准备好）之前是需要时间的
      // setTimeout(this.initSwiper)

      // $nextTick用在数据发生变化后，等视图已经更新，DOM已经准备好，才执行传入的方法
      this.$nextTick(() => {this.initSwiper()})
    });
  },
  methods: {
    initSwiper() {
      new window.Swiper('.swiper-container', {
        autoplay: true,
        loop : true,
        pagination: {
          el: '.swiper-pagination'
        }
      })
    },
  },
};
</script>

<style lang="sass">
.home
  padding: .2rem .4rem
  .swiper-slide
    width: 6.7rem
    height: 2.7rem
    border-radius: .1rem
    background-repeat: no-repeat
    background-size: cover
    a
      display: block
      height: 100%
</style>
